<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.level1 {
				width: 400px;
				height: 400px;
				background-color: lightgray;
			}

			.level2 {
				width: 300px;
				height: 300px;
				background-color: gray;
			}

			.level3 {
				width: 200px;
				height: 200px;
				background-color: darkslategray;
				color: white;
			}
		</style>
	</head>
	<body>
		<div class="level1">
			<div class="level2">
				<div class="level3">快点击我</div>
			</div>
		</div>
		<script type="text/javascript">
			var divs = document.querySelectorAll("div");
			for (var i = 0; i < divs.length; i++) {
				divs[i].onclick = function(e) {
					alert(e.target.className + ' : ' + e.currentTarget.className);
					// e.stopPropagation();
				}
			}
		</script>
	</body>
</html>
